<h2 class="hide">{DO}部门</h2>
<div id="master-unit-form"
     class="hide-roles"
     data-topple="hsForm"
     data-load-url="centra/master/unit/info.act?id=${id}&amp;ab=.enfo&amp;with-roles=default"
     data-save-url="centra/master/unit/save.act?id=${id}"
     data--0="initInfo:($(this).hsFind('%'))">
    <form action="" method="POST">
        <input type="hidden" name="id"  data-fn/>
        <input type="hidden" name="pid" data-fn/>
        <div class="row">
            <div class="col-xs-6 base-info" style="overflow: auto;">
                <div class="form-group">
                    <label class="control-label">名称</label>
                    <input type="text" name="name" class="form-field form-control" required="required"/>
                </div>
                <div class="form-group">
                    <label class="control-label">说明</label>
                    <textarea name="note" class="form-field form-control"></textarea>
                </div>
                <div class="form-group">
                    <label class="control-label">权重</label>
                    <input type="number" name="boost" value="0" class="form-field form-control"/>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label class="control-label">状态</label>
                    <select name="state" class="form-field form-control"></select>
                </div>
            </div>
            <div class="col-xs-6 role-info" style="overflow: auto;">
                <div class="form-group" style="margin-bottom: 0;">
                    <label class="control-label">权限设置</label>
                    <input type="hidden" name="roles..role" class="form-final"/>
                    <div class="checkset" data-item-class="col-xs-6 col-lg-3"
                         data-fn="roles..role" data-ft="_checkset"
                         data-vl="roles" data-tl="text"
                         data-vk="name"  data-tk="text">
                    </div>
                </div>
            </div>
        </div>
        <hr/>
        <div class="row">
            <div class="col-xs-6 form-btns board">
                <button type="submit" class="commit btn btn-primary">提交</button>
                <button type="button" class="cancel btn btn-link"   >取消</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    (function($) {
        var context = $("#master-unit-form");

        // 左右平衡大小, 需减掉上下部分的高度
        var h = $(window).height() - 70 - 96;
        context.find(".base-info").css("max-height", h);
        context.find(".role-info").css("max-height", h);

        // 有可分配权限才显示
        context.on("loadBack", function(ev, rd) {
            if (!rd["enfo"]["roles..role"].length ) {
                context.find(".role-info").remove();
            } else {
                context.removeClass( "hide-roles" );
                // 重组名称, 加上路径
                $.each(rd["enfo"]["roles..role"], function(i,r) {
                    if (r.tabs && r.tabs.length) {
                        r.text  = r.tabs.join(" / ") +" / "+ r.text;
                    }
                });
            }
            context.data("loading", true);
        });
        context.on("loadOver", function() {
            context.removeData("loading");
        });

        // 选择与之关联的权限
        context.on("change", "[name='roles..role']", function() {
            if (context.data("loading")) {
                return; // 加载过程中避免频繁调用卡死页面
            }
            var area = $(this).closest(".form-group");
            if ($(this).prop("checked")) {
                    var r = $(this).data("rels");
                    if (r && r.length )
                area.find(":checkbox" )
                    .not (":checked"  )
                    .not (".checkall" )
                    .not (this)
                    .each(function( ) {
                    var v = $(this).val ( /**/ );
                    if ($.inArray(v, r) !== -1 ) {
                        $(this).prop("checked", true ).change();
                    }
                });
            } else {
                    var v = $(this).val ( /**/ );
                area.find(":checkbox" )
                  .filter(":checked"  )
                    .not (".checkall" )
                    .not (this)
                    .each(function( ) {
                    var r = $(this).data("rels");
                    if (r && r.length )
                    if ($.inArray(v, r) !== -1 ) {
                        $(this).prop("checked", false).change();
                    }
                });
            }
        });
    })(jQuery);
</script>